<template>
  <el-dialog
    v-model="value"
    :title="title"
    width="30%"
    :before-close="handleClose"
    :show-close="false"
    style="padding-right: 24px; padding-left: 24px"
  >
    <slot name="content"></slot>
    <template #footer>
    <span class="dialog-footer">
      <el-button v-if="cancelButton" @click="cancelHandler">取消</el-button>
      <el-button v-if="draftEssayButton" @click="draftEssayHandler">保存为草稿</el-button>
      <el-button v-if="releaseEssayButton" type="primary" @click="releaseEssayHandler">发布文章</el-button>
      <el-button v-if="confirmButton" type="primary" :loading="confirmLoading" @click="confirmHandler">确定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'DialogForm',
  props: {
    title: { default: '信息修改' },
    modelValue: { default: false },
    cancelButton: { default: false },
    confirmButton: { default: false },
    confirmLoading: { default: false },
    draftEssayButton: { default: false },
    releaseEssayButton: { default: false }
  },
  computed: {
    value: {
      get () {
        return this.modelValue
      },
      set (value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  setup () {
    return {
      data: ref({
        name: '',
        description: ''
      })
    }
  },
  methods: {
    confirmHandler () {
      this.$emit('confirm')
    },
    handleClose () {
      return null
    },
    cancelHandler () {
      this.value = false
      this.$emit('cancel')
    },
    draftEssayHandler () {
      this.$emit('draftEssay')
    },
    releaseEssayHandler () {
      this.$emit('releaseEssay')
    }
  },
  watch: {
    dialogVisible: function () {
      this.aVisible = this.dialogVisible
    }
  }
}
</script>

<style scoped>

</style>
